<template>
    <div class="main">
        <Header />
        <div class="mainContainer">
            <div class="nav">
                <SideMenu />
            </div>
            <div class="routeView">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import Header from '@/components/Header.vue';
import SideMenu from '@/components/SideMenu.vue';
</script>
<style lang="less">
.main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

// 当nav宽度变化时，routeView宽度会自适应变化
.mainContainer {
    flex-grow: 1;
    display: flex;

    .nav {
        position: relative;
        width: auto;
        height: 100%;

        .sideMenu {
            height: 100%;
        }
    }

    .routeView {
        flex-grow: 1;
        position: relative;
    }
}
</style>
